<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="example1" style="height:200px;width:500px;border:1px solid blue">
    <!--将此float放到B处试试,感受下float是常规流Normal Flow完成后进行的同行内胡浮动,文字环绕效果-->
    <div style="width:100px;height:100px;background-color: red;float: right"></div>
    <p>float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
        如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
    </p>
    <p>注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。</p>
    <!--B处-->
</div>

<div id="example2" style="height:100px;width:500px;border:1px solid blue">
<!--可以看出float会将元素变成block box,从而使整个margin生效，而inline box只有水平的margin才起作用呢-->
        <span style="float: left;margin:1rem">左青龙</span>
    <!--将下行移动到B处看看，感受float的文字环绕效果是会向上挪动的哟-->
    <span style="float: right">右白虎</span>

    <div style="text-align: center;background-color: red;width:100%">中间是标题</div>

    <!--B处-->
</div>


<div id="example3" style="height:200px;width:500px;border:1px solid blue">
   <div style="width:20%;height:100px;background-color: red;float: left"></div>

    <div style="padding-left:20%;background-color: blue">
     <p>单侧固定流体布局float 此处改为margin试试看，与连续的float的码砖块式布局相比较，感受下本方法的优点。
         另外，留意padding可以用百分数哦！
     </p>
        <p>
            连续float码转块的布局虽然可行，但太过脆弱，如果右边宽度变化过大，会怎么样？
        </p>

    </div>
</div>
<div id="example4" style="height:200px;width:500px;border:1px solid blue">
    <div style="width:30%;height:100px;background-color: red;float: left"></div>
    <div style="overflow: hidden;background-color: lightgrey;height:100%;width:70%">
        任何overflow:非visible值均会创建一个新的BFC，如overflow:hidden。
        但是比较奇怪的是添不添加overflow:hidden配合float居然有如此功能？可以删掉overflow属性试试看
        或者删掉左边的float试试看
    </div>

    </div>

</body>
<div id="example5" style="width:500px;border:1px solid blue">
    <div style="width:20%;height:100px;background-color: red;position:absolute">

    </div>
    float作为out flow ，会用用来计算正常包含块的高度哦。可以去掉包含块的height属性试试看,
    这点类似于position:absolute。
</div>

</body>
</html>